<template>
  <el-card style="margin: 10px; lenth: 1000px">
    <h3 style="text-align: left">行为识别</h3>
    <hr />

    <el-container>
      <el-header>行为识别</el-header>
      <el-container>
        <el-main>
          <showvideo></showvideo>
        </el-main>
        <el-aside style="position: relative">
          <!-- <div class ="test"> <status > </status> </div> -->

          <status style="background-color: 33cdc7"> </status>
        </el-aside>
      </el-container>
    </el-container>
  </el-card>
</template>

<script>
import Status from "@/views/action/status";
import Showvideo from "@/views/action/showvideo";
//import ShowVideo from './showVideo.vue'
export default {
  components: {
    Status,
    Showvideo,
  },
};
</script>
<style>
.test {
  margin: 0 auto;
  width: 80%;
  height: 150px;
}

.el-header,
.el-footer {
  background-color: #05397e;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #2d3a4b;
  color: #333;
  text-align: center;
  line-height: 30px;
}

.el-main {
  background-color: #2d3a4b(0, 0%, 100%);
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
